import React, {Component, PureComponent} from 'react';
import Vertex from "./vertex";
import Edge from "./edge";


let params = {
  zoomVal: 1,
  left: 0,
  top: 0,
  currentX: 0,
  currentY: 0,
  flag: false
};



class CanvasSvg extends Component {
    constructor() {
        super();
    }

    componentDidMount() {
    this.startDrag(
      document.getElementById("img"),
      document.getElementById("img"),
        document.getElementById("scroll")
    );
  }

  componentDidUpdate() {
      this.startDrag(
          document.getElementById("img"),
          document.getElementById("img"),
          document.getElementById("scroll")
      );
  }

  //图片缩放
  onWheel = () => {

    params.zoomVal += window.event.wheelDelta / 2000;
    if (params.zoomVal >= 0.1) {
      this.imgDom.style.transform = "scale(" + params.zoomVal + ")";
    } else {
      params.zoomVal = 0.1;
      this.imgDom.style.transform = "scale(" + params.zoomVal + ")";
    }
     return false;

  };

  //获取相关CSS属性
  getCss = (o, key) => {
    return o.currentStyle
      ? o.currentStyle[key]
      : document.defaultView.getComputedStyle(o, false)[key];
  };

  //拖拽的实现
  startDrag = (bar, target, father, callback) => {
    if (this.getCss(target, "left") !== "auto") {
      params.left = this.getCss(target, "left");
    }
    if (this.getCss(target, "top") !== "auto") {
      params.top = this.getCss(target, "top");
    }
    //o是移动对象
      //防止IE文字选中
      father.onselectstart = () => {
          return false;
        };
      // TODO
      bar.onmousedown = event => {
      params.flag = true;
      if (!event) {
        event = window.event;
      }
      let e = event;
      params.currentX = e.clientX;
      params.currentY = e.clientY;
    };

    document.onmouseup = () => {
      params.flag = false;
      if (this.getCss(target, "left") !== "auto") {
        params.left = this.getCss(target, "left");
      }
      if (this.getCss(target, "top") !== "auto") {
        params.top = this.getCss(target, "top");
      }
    };

    document.onmousemove = event => {
      let e = event ? event : window.event;

      if (params.flag) {
        let nowX = e.clientX,
          nowY = e.clientY;
        let disX = nowX - params.currentX,
          disY = nowY - params.currentY;
        // 元素的left 不能超过父元素的-width 与 width
           let fatherWidth;
          let fatherHeight;
          let height_transition;
          fatherWidth = parseInt(window.getComputedStyle(document.getElementById("img")).getPropertyValue("width"), 10);
          fatherHeight = parseInt(window.getComputedStyle(document.getElementById("img")).getPropertyValue("height"), 10);

          fatherWidth = parseInt(fatherWidth / 2 + "");
          fatherHeight = parseInt(fatherHeight / 2+ "");
          height_transition = parseInt(window.getComputedStyle(document.querySelector("body")).getPropertyValue("height")) - fatherHeight * 2;



          let tempLeft = parseInt(params.left, 10) + disX;
          if (tempLeft > -fatherWidth && tempLeft < fatherWidth)
               target.style.left = tempLeft + "px";

          let tempTop = parseInt(params.top, 10) + disY  ;
          if (tempTop > -fatherHeight  && tempTop < fatherHeight + height_transition * 1.5)
              target.style.top = tempTop + "px";

        if (typeof callback === "function") {
          callback(
            (parseInt(params.left, 10) || 0) + disX,
            (parseInt(params.top, 10) || 0) + disY
          );
        }

        if (event.preventDefault) {
          event.preventDefault();
        }
      }
    };
  };

    render = () => {

        //     console.log("vertex", this.props.vertices);
        // console.log("edges", this.props.edges);
        //     if (this.props.reset)
        //
        //     return (
        //         <div
        //             id = "scroll"
        //             style={{
        //             width: "100%",
        //             height: "80vh",
        //             position: "absolute",
        //
        //         }}
        //     >
        //         <svg viewBox="0 0 240 150" xmlns="http://www.w3.org/2000/svg"
        //              id="img"
        //              border="0"
        //                 ref={dom => {
        //                     this.imgDom = dom;
        //                     }}
        //                 style={{
        //                         position: "absolute",
        //                         height: "80vh",
        //                 }}
        //
        //         >
        //         </svg>
        //     </div>
        //     )
        //
        return (

                <div
                    id = "scroll"
                onWheel={this.onWheel}

                style={{
                    overflow: "hidden",
                    width: "100%",
                    height: "60vh",
                    position: "relative",
                }}
            >


                <svg viewBox={"0 0 " + this.props.width+ " " + this.props.height}  preserveAspectRatio="xMidYMin meet"   xmlns="http://www.w3.org/2000/svg"
                     id="img"
                     border="0"


                        ref={dom => {
                            this.imgDom = dom;
                            }}
                        style={{
                                position: "absolute",
                                width: "100%",
                                height: "100%",
                                cursor: "move",
                        }}

                >

                    {

                        this.props.edges.map((edge, cellidx) => {
                            return (
                                <Edge
                                    id={cellidx}
                                    pos={{ x1: edge.x1, y1: edge.y1,
                                           x2: edge.x2, y2: edge.y2
                                    } }
                                />
                            );
                        })}
                    }
                    {
                        this.props.vertices.map((vertex, cellidx) => {
                            return (
                                <Vertex
                                    id={cellidx}
                                    current={this.props.current === cellidx}
                                    visited = {this.props.visited[vertex.label]}
                                    label={vertex.label}
                                    pos={{ x: vertex.x, y: vertex.y,
                                          px: vertex.px, py: vertex.py}}
                                    color={this.props.color}
                                    type={this.props.type}
                                />
                            );
                        })}
                    }


                </svg>
            </div>


        )
            ;
    }


}

export default CanvasSvg;